import React from 'react';
class CcCom extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            chData: [
                {
                    name: "多种操作系统、高弹性",
                    text: "我们为您提供最新、最常用、最稳定的映像。弹性可扩展，随时调整CPU、内存、存储。",
                },
                {
                    name: "自有映像",
                    text: "可在搭建好环境后捕获成自有映像，之后可基于此自由映像创建更多主机。",
                },
                {
                    name: "全面监控",
                    text: "历史和实时监控主机CPU、内存、硬盘读写、网络流量等重要数据。",
                },
                {
                    name: "备份与恢复",
                    text: "可与其挂载的硬盘批量在线备份，且可随时回滚到某一个备份点。",
                }
            ],
        }
    }
    render() {
        return (
            <div className="cc-content">
                <div className="c-c-t common-width">
                    <ul>
                        <li>
                            <div className="d1"></div>
                            <p>超级规模级部署</p>
                        </li>
                        <li>
                            <div className="d2"></div>
                            <p>技术支持 快速响应</p>
                        </li>
                        <li>
                            <div className="d3"></div>
                            <p>可视化操作</p>
                        </li>
                    </ul>
                </div>
                <div className="c-c-b">
                    <div className="page-title common-width">
                        <div className="title-box">
                            CLOUD HOST
                            <span>云主机服务</span>
                        </div>
                        <p>
                            CLOUD HOST（云主机）是云数据中心以虚拟机器的形式运行在云平台中的映像副本。
                            基于一个映像，您可以创建任意数量的主机。
                            在创建主机时，您需要指明CPU 和内存的配置。
                            云平台允许您任意指定 CPU、内存的数量， 也允许您在主机创建之后随时再行调整。
                        </p>
                    </div>
                    <div className="c-c-b-c common-width">
                        <ul>
                            {this.state.chData.map((item: any, i: number) => {
                                return (
                                    <li key={i}>
                                        <div className="img-box">
                                            <span className={`s${i + 1}`}></span>
                                        </div>
                                        <div className="desc">
                                            <p className="name">{item.name}</p>
                                            <p className="text">{item.text}</p>
                                        </div>
                                    </li>
                                )
                            })}
                        </ul>
                        <br className="clear" />
                    </div>
                </div>
            </div>
        )
    }
}
export default CcCom;